<template>
  <div class="container">
    <div class="header">
      <app-header :title="title"></app-header>
    </div>
    <div class="box">
      <div class="content">
        <div class="content-form">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="my-el-form">
            <el-form-item label="Site Code: ">
              <el-select v-model="form.site" placeholder="select one site" style="width: 100%">
                <el-option label="site one" value="siteOne" />
                <el-option label="site two" value="siteTwo" />
              </el-select>
            </el-form-item>
            <el-form-item label="Login: " prop="login">
              <el-input v-model="form.login"></el-input>
            </el-form-item>
            <el-form-item label="TT Number: " prop="ttNumber">
              <el-input v-model.number="form.ttNumber"></el-input>
            </el-form-item>
            <el-form-item label="Case: ">
              <el-select v-model="form.case" placeholder="select one case" style="width: 100%">
                <el-option label="case one" value="caseOne"></el-option>
                <el-option label="case two" value="caseTwo"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Time: ">
              <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date1" style="width: 100%;"></el-time-picker>
              </el-col>
              <el-col class="my-line" :span="2">---</el-col>
              <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
        <div class="content-calendar">
          <div class="my-calendar">
            <el-calendar v-model="calendarVal"></el-calendar>
          </div>
        </div>
      </div>
      <div class="box-button">
        <div class="cancel-btn" @click="$router.push('/bookAppointment')"><div class="cancel-btn-text">Cancel</div></div>
        <div class="certain-btn" @click="$router.push('/bookNow')"><div class="certain-btn-text">Book Now</div></div>
      </div>
    </div>
  </div>
</template>

<script>
import AppHeader from '../../components/AppHeader'
export default {
  name: 'ItseAppointment',
  components: { AppHeader },
  data () {
    const validateLogin = (rule, value, callback) => {
      if (value !== value.replace(/[^a-zA-Z]/g, '')) {
        callback(new Error('Login must be alphabetic'))
      }
    }
    return {
      title: 'Amazon ITSE Appointment',
      form: {
        site: '',
        login: '',
        ttNumber: '',
        case: '',
        date1: '',
        date2: ''
      },
      calendarVal: '',
      rules: {
        login: [
          { validator: validateLogin, trigger: 'blur' }
        ],
        ttNumber: [{ type: 'number', message: 'TT Number must be numeric' }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 1;

  .header {
    flex: none;
    height: 100px;
  }

  .box {
    flex: 1;
    display: flex;
    flex-direction: column;

    .content {
      height: 450px;
      display: flex;
      flex-direction: row;

      &-form {
        height: 100%;
        width: 40%;

        .my-el-form {
          margin-left: 20px;
          margin-top: 50px;
        }
      }

      &-calendar {
        height: 100%;
        width: 60%;

        .my-calendar {
          margin-left: 50px;
        }
      }
    }

    .box-button {
      height: 200px;
      display: flex;
      align-content: center;
      justify-content: center;

      .certain-btn {
        width: 140px;
        height: 40px;
        background-color: #ffffff;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: 200px;
        margin-right: 200px;
        margin-top: 100px;
        cursor: pointer;

        &-text {
          height: 20px;
          margin-top: 10px;
        }
      }

      .cancel-btn {
        width: 140px;
        height: 40px;
        background-color: #ffffff;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: 200px;
        margin-right: 200px;
        margin-top: 100px;
        cursor: pointer;

        &-text {
          height: 20px;
          margin-top: 10px;
        }
      }
    }
  }
}

</style>

<style lang="scss">
.my-line {
  margin: 0 auto;
}

.el-calendar {
  width: 90%;
}

.el-calendar-table .el-calendar-day {
  height: 50px;
}

</style>
